<template>
    <div class="home" > <!-- 这里补充缺失的结束标签 -->
        <div class="home-head">
        <div class="logo-section">
            <img src="@/assets/logo-topbar.gif" alt="JPetStore" class="logo" />
        </div>
        <div class="nav-section">
            <div class="" v-if="isLoggedIn">    
                <!-- <RouterLink to="page2/myorders" class="nav-link">My Orders</RouterLink> -->
                <button class="nav-link" @click="entermyorder"><b>My Orders</b></button>
            
            </div>
            <div class="search-box">
              
            <input type="text" v-model="searchInput" placeholder="Search..." id="searchInput" name="searchInput"
            ref="searchInputRef"  @focus="handleFocus" @keyup.enter="focusSearchButton"/>

            <button  ref="searchButtonRef" :disabled="!searchInput" @click="() => search(searchInput)" 
                class="search-btn">Search</button>
            </div>
            <div class="nav-links">
                <button @click="toCart" class="nav-link"><img src="@/assets/cart.gif" alt="Cart"
                        class="cart-icon" /></button>
                <span class="separator">|</span>
                <button @click="toCatalog" class="nav-link"><img src="@/assets/log.gif" alt="Catalog" 
                    class="cart-icon"
               height="15" weight="18"/></button>
                <span class="separator">|</span>
               
                <div v-if="!isLoggedIn">
                    <button @click="signIn" class="nav-link">Sign In</button>
                    <span class="separator">|</span>
                    <button @click="register" class="nav-link">Register</button>
                </div>
                <div v-else>
                   <el-icon class="nav-link" @click="toUserInfo">
                         <User/>
                   </el-icon>
                </div>
                <span class="separator">|</span>
                <RouterLink to="/help" class="nav-link">?</RouterLink>
            </div>
        </div>  
    </div> 
    <div class="home-middle">
    <div class="home-middle-select">
        <button @click="navigateToCategory('FISH')"><img src="@/assets/sm_fish.gif" /></button>
        <span class="separator">|</span>
        <button @click="navigateToCategory('DOGS')"><img src="@/assets/sm_dogs.gif" /></button>
        <span class="separator">|</span>
        <button @click="navigateToCategory('REPTILES')"><img src="@/assets/sm_reptiles.gif" /></button>
        <span class="separator">|</span>
        <button @click="navigateToCategory('CATS')"><img src="@/assets/sm_cats.gif" /></button>
        <span class="separator">|</span>
        <button @click="navigateToCategory('BIRDS')"><img src="@/assets/sm_birds.gif" /></button>
    </div>
    </div>
    
</div>
   
    
</template>

<script setup lang="ts">
import { ref, computed, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import router from '../router';
import store from '@/store';
import { ElMessage } from 'element-plus'
import { User } from '@element-plus/icons-vue'
import Search from '@/pages/page3/components/search.vue';

// 获取用户是否登录
const isLoggedIn = ref(store.getters.getLoginStatus)
// 获取存储输入框的值
const searchInput = ref(store.getters.getSearchInput);
store.commit('setSearchInput', searchInput.value);
// 跳转到登录页面
const signIn = () => {
    //componentName.value = 'LoginComponent'
    window.location.href = '/login';
}
// 跳转到注册页面
const register = () => {
    //componentName.value = 'RegisterComponent'
    window.location.href = '/register';
}


// 处理按钮点击事件

const navigateToCategory = (categoryId: string) => {
    window.location.href = `/category/${categoryId}`;
}
    
    
// 跳转到用户信息页面
const toUserInfo = () => {
    window.location.href = "/userinfo"  
}
// 跳转到购物车页面
const toCart = () => {
    if (isLoggedIn.value) {
        window.location.href = "/page2"  // 直接跳转到购物车页面
    } else {
        ElMessage.warning('请先登录');
    }
}
const toCatalog = () => {
  if (store.getters.getLoginStatus) {
     // 跳转到日志页面
     window.location.href = "/myrecord"
  } else {
    ElMessage.warning('请先登录');
  }
};
// 搜索按钮点击事件
const search= (searchInput:string) =>{
 window.location.href=(`/search/${searchInput}`)  
};
//创建一个模板引用，用于获取输入框的DOM元素
const searchInputRef = ref<HTMLInputElement | null>(null);
// 当输入框获得焦点时，自动选中输入框中的所有文本
const handleFocus = () => {
  document.addEventListener('click', handleClickOutside);
  if (searchInputRef.value) {
    searchInputRef.value.select();
  }
};
// 当点击页面其他地方时，隐藏输入框
const handleClickOutside = (event: MouseEvent) => {
  if (searchInputRef.value && !searchInputRef.value.contains(event.target as Node)) {
    searchInput.value = '';
    document.removeEventListener('click', handleClickOutside);
  }
};
onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside);
});

// 创建一个模板引用，用于获取搜索按钮的 DOM 元素
const searchButtonRef = ref<HTMLButtonElement | null>(null);
// 在用户按下回车键后自动聚焦搜索按钮
const focusSearchButton = () => {
  if (searchButtonRef.value) {
    searchButtonRef.value.focus();
    search(searchInput.value); // 触发搜索逻辑
  }
};

const entermyorder = () => {
router.push("/myorders")  // 直接跳转到订单页面
}

</script>

<style>
.home {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
}

.home-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: black;
    color: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: 15%; 
    
}
.home-middle {
  margin-top: 10vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}
.home-middle-select {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.home-middle-select button {
  border: none;
  background-color: transparent;
  padding: 0;
  cursor: pointer;
}

.home-middle-select img {
  cursor: pointer;
}

.logo-section {
    display: flex;
    align-items: center;
}

.logo {
    height: auto;
}

.nav-section {
    display: flex;
    align-items: center;
    gap: 20px;
}

.search-box {
    display: flex;
    gap: 5px;
    align-items: right;
}

.search-box input {
    padding: 5px;
    border: 1px solid #ccc;
}

.search-btn {
    background-color: #666;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
}

.nav-links {
    display: flex;
    gap: 10px;

}

.cart-icon {
    height: 20px;
}

.nav-link {
    color: #ffa500;
    text-decoration: none;
    border: none;
    background-color: transparent;
    font-size: 16px;
    cursor: pointer;
}

.separator {
    color: #0095fff3;
}
</style>
